<template>
	<view style="min-height: 100vh;">
		<view class="walletBox flex-js">
			<view class="text-align-center">
				<text class="fs-50">{{WalletYue}}</text><br>
				<text class="fs-24">小金币有大用途，多领一些囤起来</text>
			</view>
			<view>
				<button class="rechargeBtn" @click="goReCharge">充值金币</button>
			</view>
		</view>

		<view style="border-bottom:1rpx solid #f0f0f0;">
			<fui-tabs :tabs="pageTabs" :current="tabIndex" isSlider selectedColor="#000" sliderBackground="#FFDD00"
				@change="changeTabs"></fui-tabs>
		</view>
		<view class="padding-all-20">
			<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{height:bodyHeight+'px'}">
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:bodyHeight+'px'}">
						<view class="list-card">
							<view class="title">日常任务</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">邀请好友</view>
									<view class="list-text">每邀请一位好友，可获得5金币</view>
								</view>
								<button class="botton" @click="navTo('/myPages/pages/invite')">去邀请</button>
							</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">每日签到</view>
									<view class="list-text">每日签到，可获得1金币</view>
								</view>
								<button class="botton" v-if="isSignin == 0 " @click="handleSignin">去签到</button>
								<button class="botton" v-else disabled
									style="background-color: #e5e5e5;color: #797979;">已签到</button>
							</view>
						</view>
						<view class="list-card">
							<view class="title">奖励任务</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">实名认证</view>
									<view class="list-text">奖励3金币,仅1次</view>
								</view>
								<button class="botton" v-if="isAuth == 0"
									@click="navTo(`/myPages/pages/authinfo`)">去实名</button>
								<button class="botton" v-else disabled
									style="background-color: #e5e5e5;color: #797979;">已实名</button>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">完善联系方式</view>
									<view class="list-text">奖励3金币,仅1次</view>
								</view>
								<button class="botton" v-if="IsPerfectInfo == 0"
									@click="navTo(`/notice/addInfo`)">去完善</button>
								<button class="botton" v-else disabled style="background-color: #e5e5e5;color: #797979;"
									@click="navTo(`/notice/addInfo`)">已完善</button>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">完善个人资料（公开资料）</view>
									<view class="list-text">奖励5金币,仅1次</view>
								</view>
								<button class="botton" v-if="IsPersonalData == 0"
									@click="navTo(`/myPages/pages/editmyinfo`)">去完善</button>
								<button class="botton" v-else disabled
									style="background-color: #e5e5e5;color: #797979;">已完善</button>
							</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">完善个人资料（权限相册）</view>
									<view class="list-text">奖励10金币,仅1次</view>
								</view>
								<button class="botton" v-if="IsPhoto == 0"
									@click="navTo(`/myPages/pages/vipPage?artisterID=${UserID}`)">去完善</button>
								<button class="botton" v-else disabled
									style="background-color: #e5e5e5;color: #797979;">已完善</button>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">制作主页</view>
									<view class="list-text">奖励5金币,仅1次</view>
								</view>
								<button class="botton" v-if="IsHome == 0"
									@click="navTo(`/myPages/pages/mypage?artisterID=${UserID}`)">去制作</button>
								<button class="botton" v-else disabled
									style="background-color: #e5e5e5;color: #797979;">已制作</button>
							</view>
						</view>
						<view class="list-card">
							<view class="title">其他方式</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">你邀请的好友加入会员</view>
									<view class="list-text">奖励48/98/168金币/人</view>
								</view>
							</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">你邀请的好友加入VIP</view>
									<view class="list-text">奖励1688金币/人</view>
								</view>
							</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">你的个人权限相册(仅vip可见)被浏览</view>
									<view class="list-text">奖励5金币/次</view>
								</view>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">你加入会员</view>
									<view class="list-text">赠送48/98/168金币</view>
								</view>
							</view>
							<view class="list">
								<view class="list-texts">
									<view class="list-title">你加入vip</view>
									<view class="list-text">赠送1688金币</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:bodyHeight+'px'}">
						<view class="list-card">
							<view class="title">金币用途</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">报名通告</view>
									<view class="list-text">消耗2金币/次</view>
								</view>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">发布通告</view>
									<view class="list-text">消耗5金币/次</view>
								</view>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">刷新通告</view>
									<view class="list-text">消耗5金币/次</view>
								</view>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">发起沟通</view>
									<view class="list-text">消耗5金币/人</view>
								</view>
							</view>


							<view class="list">
								<view class="list-texts">
									<view class="list-title">发起极速联系</view>
									<view class="list-text">消耗88/58/18金币/次</view>
								</view>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">查看艺人权限相册</view>
									<view class="list-text">消耗10金币/次</view>
								</view>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">赠送礼物</view>
									<view class="list-text">消耗1-1314金币/次</view>
								</view>
							</view>

							<view class="list">
								<view class="list-texts">
									<view class="list-title">付费通告开放推广</view>
									<view class="list-text">付费通告开放推广，消耗金币</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:bodyHeight+'px'}">
						<view class="padding-all-20" style="background:#FFF;">
							<view v-if="WalletList.length === 0">
								<fui-empty src="../../static/component/empty/img_news_3x.png" title="暂无信息"></fui-empty>
							</view>
							<view v-else style="padding:10rpx;">
								<view v-for="(item, index) in WalletList" :key="index" class="WalletList flex-js">
									<view>
										<view>{{ item.WalletName }}</view>
										<view style="color:#999">{{ item.addTime }}</view>
									</view>
									<view v-if="item.WalletMoney > 0" class="fs-30 text-align-right"
										style="width:120rpx;color:green;">
										<text v-if="item.WalletMoney > 0">+</text>
										<text>{{ item.WalletMoney }}</text>
									</view>
									<view v-else class="fs-30 text-align-right" style="width:120rpx;color:#FFDD00;">
										<text>{{ item.WalletMoney }}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<fui-landscape :show="SigninPop" maskClosable @close="SigninPop = false">
			<view class="borderR-20" style="width:80vw;height:600rpx;background:#FFF;">
				<view class="borderR-20 text-align-center"
					style="height:300rpx;padding-top:100rpx;background-color:#FFFFCC;">
					<view class="fs-50 bold">签到成功</view>
					<view class="disflex marginTop-30" style="width:180rpx;margin:auto;">
						<image :src="baseUrl + 'icon/goldcoin.png'" style="width:50rpx;height:50rpx;"></image>
						<text class="marginLeft-40 fs-36"> + 1</text>
					</view>
					<view class="fs-28 marginTop-40">邀请好友可获得更多金币</view>
				</view>
				<view class="marginTop-40">
					<button class="shareBtn" @click="navTo('myPages/pages/invite')">去邀请</button>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				WalletYue: '0',
				WalletMemo: [],
				WalletList: [],
				pageTabs: [{
						name: '获得金币'
					},
					{
						name: '金币用途'
					},
					{
						name: '金币记录'
					}
				],
				tabIndex: 0,
				bodyHeight: 550,
				SigninPop: false,
				isSignin: 0,
				UserID: '',
				isAuth: 0,
				IsHome: 0,
				IsPhoto: 0,
				IsPersonalData: 0,
				IsPerfectInfo: 0,
				baseUrl: ''
			};
		},
		onLoad(options) {
			this.baseUrl = this.$baseUrl;
			this.UserID = options.UserID
		},
		onShow() {
			this.loadData();
			const now = new Date();
			// console.log(now)
		},
		methods: {
			// 签到
			handleSignin() {
				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/UserAction/Signin', {}).then(res => {
						// console.log('signin', res);
						if (res.code == 200) {
							this.loadData()
							if (res.data.signinState === 1) {
								this.SigninPop = true
							} else {
								uni.showToast({
									title: '今日已签过到！',
									icon: 'none'
								})
							}
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin')
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			goReCharge() {
				uni.getStorageSync('ReChargeUrl', '/myPages/pages/myWallet')
				uni.navigateTo({
					url: '/myPages/pages/reCharge'
				})
			},
			loadData() {

				this.$httpost('/UserCenter/myWallet', {}).then(res => {
					// console.log('mywallet', res);

					if (res.code == 200) {
						this.WalletYue = res.data.WalletYue;
						this.WalletMemo = res.data.WalletMemo;
						this.WalletList = res.data.WalletList;
						this.isSignin = res.data.isSignin;
						this.isAuth = res.data.isAuth; // 是否认证
						this.IsHome = res.data.IsHome; // 是否制作首页
						this.IsPhoto = res.data.IsPhoto; // 是否上传图片
						this.IsPersonalData = res.data.IsPersonalData; // 是否完善个人资料
						this.IsPerfectInfo = res.data.isPerfectInfo; // 是否完善联系信息
					}
				});
			},
			changePages(e) {
				// console.log(e)				
				this.pageIndex = e.index
			},
			changeTabs(e) {
				// console.log(e)
				this.switchTab(e.index)
			},
			tabChange(e) {
				// console.log(e)
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.walletBox {
		width: 85vw;
		margin: auto;
		height: 130rpx;
		background-color: #FFDD00;
		border-radius: 20rpx;
		padding: 40rpx;
	}

	.rechargeBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: black;
		color: #FFF;
		border-radius: 30rpx;
		font-size: 28rpx;
		margin-top: 30rpx;
	}

	.text-align-center {
		text-align: center;


	}

	.fs-50 {
		font-size: 50rpx !important;
	}

	.fs-24 {
		font-size: 24rpx !important;
	}

	.list-card {
		padding: 20rpx;
		background-color: #fff;

		.title {
			border-left: 10rpx solid #FFDD00;
			padding-left: 20rpx;
			font-size: 30rpx;
			font-weight: bold
		}


		.list {
			width: 100%;
			padding: 20rpx 0rpx 20rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;

			.list-texts {
				width: 460rpx;


				.list-title {
					font-size: 28rpx;
				}

				.list-text {
					color: #999;
					font-size: 24rpx;
				}
			}

			.botton {
				width: 160rpx;
				height: 60rpx;
				background-color: #FFDD00;
				font-size: 24rpx;
				border-radius: 60rpx;

				&::after {
					border: none;
				}
			}
		}
	}

	.WalletList {
		padding: 20rpx 0rpx 20rpx 0rpx;
		border-bottom: 1rpx solid #f0f0f0
	}

	.shareBtn {
		background-color: #FFDD00;
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 30rpx;
	}
</style>